<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.53">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41480445-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

<title data-react-helmet="true">Grids - Pure</title>

<meta data-react-helmet="true" charset="utf-8"><meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-react-helmet="true" property="og:title" content="Grids - Pure"><meta data-react-helmet="true" name="description" content="Fully customizable and responsive CSS grids."><meta data-react-helmet="true" property="og:description" content="Fully customizable and responsive CSS grids."><meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">


<link rel="stylesheet" href="/styles.e0d41c52.css">


<link rel="preload" href="/styles.59801a08.js" as="script">

<link rel="preload" href="/runtime~main.5e4f6629.js" as="script">

<link rel="preload" href="/main.596eb772.js" as="script">

<link rel="preload" href="/common.71de0887.js" as="script">

<link rel="preload" href="/3.0a320f10.js" as="script">

<link rel="preload" href="/129a131a.eef73f64.js" as="script">

</head>
<body>

<div id="__docusaurus">
<div id="layout"><a href="#menu" id="menuLink" class="menu-link"><span></span></a><div id="menu"><div class="pure-menu"><a class="pure-menu-heading" href="/">Pure</a><ul class="pure-menu-list"><li class="pure-menu-item"><a class="pure-menu-link" href="/start/">Get Started</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/layouts/">Layouts</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/base/">Base</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/grids/">Grids</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/forms/">Forms</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/buttons/">Buttons</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/tables/">Tables</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/menus/">Menus</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/tools/">Tools</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/customize/">Customize</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/extend/">Extend</a></li><li class="pure-menu-item"><a href="https://github.com/pure-css/pure/releases/" class="pure-menu-link">Releases</a></li></ul></div></div><div id="main" class="grids"><div class="header"><h1>Grids</h1><h2>Fully customizable and responsive CSS grids.</h2></div><div class="content"><h2 id="introduction-to-pure-grids" class="content-subhead">Introduction to Pure Grids<a href="#introduction-to-pure-grids" class="content-link" title="Heading anchor"></a></h2><p>Pure Grids are easy to work with, and very powerful. There are a few simple concepts to keep in mind:</p><dl><dt>Grid classes vs. unit classes</dt><dd>Pure Grids consist of two types of classes: the grid class (<code>pure-g</code>) and unit classes (<code>pure-u</code> or <code>pure-u-*</code>)</dd><dt>The widths of the units are fractions</dt><dd>Units have various class names that represent their widths. For example, <code>pure-u-1-2</code> has a width of 50%, whereas <code>pure-u-1-5</code> would have a width of 20%.</dd><dt>All child elements of a grid must be units</dt><dd>Child elements contained within an element with a <code>pure-g</code> classname <em>must</em> be a grid unit with a <code>pure-u</code> or <code>pure-u-*</code> classname.</dd><dt>Content goes inside grid units</dt><dd>All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.</dd></dl><aside><p>When setting a <code>font-family</code> in your project, be sure to check out the section on <a to="#using-grids-with-your-font-family" href="#using-grids-with-your-font-family">using Grids with your font-family</a>.</p></aside><p>Let&#x27;s start with a simple example. Here&#x27;s a grid with three columns:</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-g&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-3&quot;</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">p</span>&gt;</span>Thirds<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">p</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-3&quot;</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">p</span>&gt;</span>Thirds<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">p</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-3&quot;</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">p</span>&gt;</span>Thirds<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">p</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div><h2 id="grids-units-sizes" class="content-subhead">Grids Units Sizes<a href="#grids-units-sizes" class="content-link" title="Heading anchor"></a></h2><p>Pure ships with both a <b>5ths</b> and <b>24ths</b> based grid. Depicted below are the available units that can be appended to the <b><code>pure-u-*</code></b> classname where <code>*</code> is one of the unit fractions listed below. For example the unit classname for 50% width is: <code>pure-u-1-2</code>.</p><h3>5ths-Based Units</h3><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1-5</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1-5"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">2-5</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-2-5"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">3-5</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-3-5"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">4-5</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-4-5"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1-1</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1-1"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">5-5</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-5-5"></div></div></div></div><h3>24ths-Based Units</h3><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1-12</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1-12"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">2-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-2-24"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">3-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-3-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1-8</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1-8"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">4-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-4-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1-6</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1-6"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">5-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-5-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1-4</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1-4"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">6-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-6-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">7-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-7-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1-3</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1-3"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">8-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-8-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">3-8</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-3-8"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">9-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-9-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">5-12</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-5-12"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">10-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-10-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">11-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-11-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1-2</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1-2"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">12-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-12-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">13-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-13-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">7-12</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-7-12"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">14-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-14-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">5-8</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-5-8"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">15-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-15-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">2-3</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-2-3"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">16-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-16-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">17-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-17-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">3-4</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-3-4"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">18-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-18-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">19-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-19-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">5-6</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-5-6"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">20-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-20-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">7-8</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-7-8"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">21-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-21-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">11-12</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-11-12"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">22-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-22-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">23-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-23-24"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1"></div></div></div></div><div class="grids-unit pure-g"><div class="grids-unit-width pure-u">1-1</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-1-1"></div></div></div></div><div class="grids-unit grids-unit-not-reduced pure-g"><div class="grids-unit-width pure-u">24-24</div><div class="grids-unit-details pure-u-1"><div class="pure-g"><div class="grids-unit-bar pure-u-24-24"></div></div></div></div><h3>Custom Unit Sizes</h3><p>We are working on building tools to allow people to customize Pure Grids. The first low-level tools, the <b><a href="https://github.com/ericf/rework-pure-grids">Pure Grids Rework Plugin</a></b>, is available to use today—we use this tool to generate Pure&#x27;s built-in unit sizes.</p><h2 id="pure-responsive-grids" class="content-subhead">Pure Responsive Grids<a href="#pure-responsive-grids" class="content-link" title="Heading anchor"></a></h2><p>Pure has a mobile-first responsive grid system that can be used declaratively through CSS class names. It&#x27;s a robust and flexible grid  that builds on top of the default grid.</p><h3>Including on Your Page</h3><p>Since media queries cannot be over-written, we <u>do not</u> include the grid system as part of <code>pure.css</code>. You&#x27;ll have to pull it in as a separate CSS file. You can do this by adding the following <code>&lt;link&gt;</code> tag to your page.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">link</span> <span class="hljs-attr">rel</span>=<span style="color:#219161">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css&quot;</span> /&gt;</span></code></pre></div></div><h3>Pure&#x27;s Regular Grid vs. Responsive Grid</h3><p>The best way to understand the difference between Pure&#x27;s regular grid and a responsive grid is through an example.The snippet below shows how regular Pure Grids are written. These grids are unresponsive. They&#x27;ll always be <code>width: 33.33%</code>, irrespective of the width of the screen.</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-g&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-3&quot;</span>&gt;</span> ... <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-3&quot;</span>&gt;</span> ... <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-3&quot;</span>&gt;</span> ... <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div><p>Next, let&#x27;s look at a responsive grid. Elements within this grid will be <code>width: 100%</code> on small screens, but will shrink to become <code>width: 33.33%</code> on medium-sized screens and above.</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-g&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1 pure-u-md-1-3&quot;</span>&gt;</span> ... <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1 pure-u-md-1-3&quot;</span>&gt;</span> ... <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1 pure-u-md-1-3&quot;</span>&gt;</span> ... <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div><h3>Default Media Queries</h3><p>When using Responsive Grids, you can control how the grid behaves at specific breakpoints by adding class names. Pure&#x27;s default responsive grids comes with the following class names and media query breakpoints.</p><div class="table-responsive"><table class="mq-table pure-table-bordered pure-table"><thead><tr><th class="highlight">Key</th><th class="highlight">CSS Media Query</th><th>Applies</th><th>Classname</th></tr></thead><tbody><tr><td class="highlight"><i>None</i></td><td class="highlight"><i>None</i></td><td><i>Always</i></td><td><code>.pure-u-*</code></td></tr><tr><td class="highlight"><b><code>sm</code></b></td><td class="mq-table-mq highlight"><code>@media screen and (min-width: 35.5em)</code></td><td>≥ <b>568px</b></td><td><code>.pure-u-<b>sm</b>-*</code></td></tr><tr><td class="highlight"><b><code>md</code></b></td><td class="mq-table-mq highlight"><code>@media screen and (min-width: 48em)</code></td><td>≥ <b>768px</b></td><td><code>.pure-u-<b>md</b>-*</code></td></tr><tr><td class="highlight"><b><code>lg</code></b></td><td class="mq-table-mq highlight"><code>@media screen and (min-width: 64em)</code></td><td>≥ <b>1024px</b></td><td><code>.pure-u-<b>lg</b>-*</code></td></tr><tr><td class="highlight"><b><code>xl</code></b></td><td class="mq-table-mq highlight"><code>@media screen and (min-width: 80em)</code></td><td>≥ <b>1280px</b></td><td><code>.pure-u-<b>xl</b>-*</code></td></tr></tbody></table></div><h3>Using Relative Units for Widths</h3><p>You may have noticed that we use <code>em</code> for our default CSS Media Query widths instead of <code>px</code>. This was a conscious decision since it allows the Media Queries to respond appropriately when people zoom the webpage. Check out <a href="http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/#relative">this article by Brad Frost</a> for some background information on using relative units within Media Queries.</p><p>If you do want to use units other than <code>em</code>, you can always modify the default Media Queries on the <a href="/start/#build-your-pure-starter-kit">Get Started</a> page. Converting from <code>em</code> to <code>px</code> is pretty simple:</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>1em == 16px *</code></pre></div></div><p><small>* The <code>em</code> to <code>px</code> conversion is based on the browser&#x27;s default font size, which is generally <code>16px</code>, but can be overridden by a user in their browser settings.</small></p><h3>An Example of Pure Responsive Grids</h3><p>The example below leverages Pure&#x27;s Responsive Grid to create a row with four columns. The columns stack on small screens, take up <code>width: 50%</code> on medium-sized screens, and <code>width: 25%</code> on large screens.</p><p>This is done by adding the <code>.pure-u-1</code> class for small screens, <code>.pure-u-md-1-2</code> for medium-sized screens, and <code>.pure-u-lg-1-4</code> for large screens. <em>Resize the page to see the grid respond to the screen size.</em></p></div><div class="grids-example"><div class="pure-g"><div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="l-box"><h3>Lorem Ipsum</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div></div><div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="l-box"><h3>Dolor Sit Amet</h3><p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p></div></div><div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="l-box"><h3>Proident laborum</h3><p>In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></div></div><div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="l-box"><h3>Praesent consectetur</h3><p>Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.</p></div></div><div class="pure-u-1"><img class="pure-img" src="https://s3.amazonaws.com/ooomf-com-files/wjNV6gWuQkqeuH8txHc9_sylwiabartyzel_unsplash_tatry_03.jpg" alt="By Sylwia Bartyzel from unsplash.com"></div><div class="pure-u-2-5"><div class="l-box"><h3>Two-Fifth Column</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.</p></div></div><div class="pure-u-3-5"><div class="l-box"><h3>Three-Fifth Column</h3><p>Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.</p><p>Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.</p></div></div></div></div><div class="content"><h2 id="grids-on-mobile" class="content-subhead">Grids on Mobile<a href="#grids-on-mobile" class="content-link" title="Heading anchor"></a></h2><p>Pure&#x27;s default grid system is mobile-first. If you want to have a grid on small screens, just use the <code>pure-u-*</code> classnames on your elements.</p></div><div class="grids-example"><div class="pure-g"><div class="pure-u-1-3"><div class="l-box"><h3>Thirds</h3><p>This cell will be 1/3 width all the time.</p></div></div><div class="pure-u-1-3"><div class="l-box"><h3>Thirds</h3><p>This cell will be 1/3 width all the time.</p></div></div><div class="pure-u-1-3"><div class="l-box"><h3>Thirds</h3><p>This cell will be 1/3 width all the time.</p></div></div></div></div><div class="content"><h2 id="responsive-images" class="content-subhead">Responsive Images<a href="#responsive-images" class="content-link" title="Heading anchor"></a></h2><p>When using Responsive Grids, you&#x27;ll want your images to be fluid as well so they grow and shrink with the content, while maintaining the correct ratio. To do this, just add the <code>.pure-img</code> class on them. Check out the example below.</p></div><div class="grids-example"><div class="pure-g"><div class="pure-u-1-4 pure-u-lg-1-8"><img class="pure-img" src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" alt="Peyto Lake"></div><div class="pure-u-1-4 pure-u-lg-1-8"><img class="pure-img" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train"></div><div class="pure-u-1-4 pure-u-lg-1-8"><img class="pure-img" src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg" alt="T-Shirt Store"></div><div class="pure-u-1-4 pure-u-lg-1-8"><img class="pure-img" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain"></div><div class="pure-u-1-4 pure-u-lg-1-8"><img class="pure-img" src="http://farm8.staticflickr.com/7478/16185861115_4ed6353a97.jpg" alt="Miami"></div><div class="pure-u-1-4 pure-u-lg-1-8"><img class="pure-img" src="http://farm3.staticflickr.com/4068/4666556755_091acf3253.jpg" alt="BCE Place, Toronto"></div><div class="pure-u-1-4 pure-u-lg-1-8"><img class="pure-img" src="http://farm6.staticflickr.com/7313/13136053333_f04b335933.jpg" alt="Banff"></div><div class="pure-u-1-4 pure-u-lg-1-8"><img class="pure-img" src="http://farm3.staticflickr.com/7628/16754137141_27dcaabd24.jpg" alt="Boston North Point Park"></div></div></div><div class="content"><h2 id="applying-padding-and-borders-to-grid-units" class="content-subhead">Applying Padding and Borders to Grid Units<a href="#applying-padding-and-borders-to-grid-units" class="content-link" title="Heading anchor"></a></h2><p>To add borders and padding to Pure Grids, you have two options. The first option is to nest a <code>&lt;div&gt;</code> inside each Grid unit and style the child container:</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">style</span>&gt;</span><span class="css">
    <span style="color:#19469d">.l-box</span> {
        <span style="color:#000080;font-weight:normal">padding</span>: <span style="color:#40a070">1em</span>;
    }
</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">style</span>&gt;</span>

...

<span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-g&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-2&quot;</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;l-box&quot;</span>&gt;</span> ... <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-2&quot;</span>&gt;</span>
        <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;l-box&quot;</span>&gt;</span> ... <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div><p>The second option is to add borders and padding directly to a grid unit. This would ordinarily risk breaking the layout, but you can easily avoid this problem by augmenting the behavior of the grid itself with a <code>box-sizing: border-box</code> rule:</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">style</span>&gt;</span><span class="css">
    <span style="color:#19469d">.pure-g</span> &gt; <span style="color:#954121">div</span> {
        <span style="color:#000080;font-weight:normal">box-sizing</span>: border-box;
    }
    <span style="color:#19469d">.l-box</span> {
        <span style="color:#000080;font-weight:normal">padding</span>: <span style="color:#40a070">1em</span>;
    }
</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">style</span>&gt;</span>

...

<span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-g&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-2 l-box&quot;</span>&gt;</span> ... <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-u-1-2 l-box&quot;</span>&gt;</span> ... <span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div><p>Using <code>box-sizing: border-box</code> keeps your markup cleaner, but has one minor drawback. Setting this property on all grid units makes it harder to override or unset the value later on. As an unopinionated library, Pure lets <code>box-sizing</code> remain at the default value of <code>content-box</code> and leaves the choice up to you.</p><h2 id="using-grids-with-your-font-family" class="content-subhead">Using Grids with Your Font-Family<a href="#using-grids-with-your-font-family" class="content-link" title="Heading anchor"></a></h2><p>Pure Grids use a specific font stack to ensure the greatest OS/browser compatibility, and by default grid units will have <code>font-family: sans-serif;</code> applied — this is the default font stack Pure&#x27;s Base (Normalize.css) applies to <code>&lt;html&gt;</code>, <code>&lt;button&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, and <code>&lt;textarea&gt;</code> elements. Fortunately, it&#x27;s quite easy to make sure your project&#x27;s font stack applies to all content when using Pure. Instead of applying your <code>font-family</code> to only the <code>&lt;body&gt;</code> element, apply it like this:</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">style</span>&gt;</span><span class="css">
<span style="color:#408080;font-style:italic">/*
When setting the primary font stack, apply it to the Pure grid units along
with &quot;html&quot;, &quot;button&quot;, &quot;input&quot;, &quot;select&quot;, and &quot;textarea&quot;. Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/</span>
<span style="color:#954121">html</span>, <span style="color:#954121">button</span>, <span style="color:#954121">input</span>, <span style="color:#954121">select</span>, <span style="color:#954121">textarea</span>,
<span style="color:#19469d">.pure-g</span> <span class="hljs-selector-attr">[class *= &quot;pure-u&quot;]</span> {
    <span style="color:#408080;font-style:italic">/* Set your content font stack here: */</span>
    <span style="color:#000080;font-weight:normal">font-family</span>: Georgia, Times, <span style="color:#219161">&quot;Times New Roman&quot;</span>, serif;
}
</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">style</span>&gt;</span></code></pre></div></div><h2 id="want-to-just-use-grids" class="content-subhead">Want to just use Grids?<a href="#want-to-just-use-grids" class="content-link" title="Heading anchor"></a></h2><p>Grids is part of the Pure CSS file. However, if you just want Grids and not the other modules, you can pull it down separately. Just include these <code>&lt;link&gt;</code> elements in your <code>&lt;head&gt;</code>.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">link</span> <span class="hljs-attr">rel</span>=<span style="color:#219161">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;https://unpkg.com/purecss@2.0.5/build/base-min.css&quot;</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">link</span> <span class="hljs-attr">rel</span>=<span style="color:#219161">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;https://unpkg.com/purecss@2.0.5/build/grids-min.css&quot;</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">link</span> <span class="hljs-attr">rel</span>=<span style="color:#219161">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css&quot;</span>&gt;</span></code></pre></div></div></div><div class="footer"><div class="legal pure-g"><div class="pure-u-1 u-sm-1-2"><p class="legal-license">This site is built with ❤️ using Pure v2.0.5<br>All code on this site is licensed under the <a href="https://github.com/pure-css/pure/blob/master/LICENSE">Yahoo BSD License</a> unless otherwise stated.</p></div><div class="pure-u-1 u-sm-1-2"><ul class="legal-links"><li><a href="https://github.com/pure-css/pure/">GitHub Project</a></li><li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li></ul><p class="legal-copyright">© 2014 - Present Yahoo! Inc. All rights reserved.</p></div></div></div></div></div>
</div>

<script src="/styles.59801a08.js"></script>

<script src="/runtime~main.5e4f6629.js"></script>

<script src="/main.596eb772.js"></script>

<script src="/common.71de0887.js"></script>

<script src="/3.0a320f10.js"></script>

<script src="/129a131a.eef73f64.js"></script>


</body>
</html>